<template>
  <Modal
    v-model="form.visible"
    :width="1000"
    :mask-closable="false"
    :loading="loading"
    :title="'添加绑定'">

      <div>
        <Input v-model="query.realName" style="width:200px" placeholder="请输入会员姓名"></Input>
        <Select v-model="query.bdStatus" style="width:200px" placeholder="请选择绑定状态">
          <Option :value="''">不限</Option>
          <Option :value="'0'">已绑定</Option>
          <Option :value="'1'">未绑定</Option>
        </Select>
        <Select v-model="query.pkMemberTypeId" style="width:200px" placeholder="请选择会员类别">
          <Option :value="''" :key="-1">不限</Option>
          <Option v-for="item in typeList" :value="item.id" :key="item.id">{{ item.memberTypeName }}</Option>
        </Select>
        <Button type="primary" @click="search()">查询</Button>
      </div>

      <Table
        :columns="columns"
        :data="list"
        no-data-text="该查询条件没有任何数据"
        class="mt20">
      </Table>

      <div class="m10 clearfix" v-if="page.total > 0">
        <div class="fr">
          <Page
            show-total
            :total="page.total"
            :current="query.currentPage"
            @on-change="onChangePage">
          </Page>
        </div>
      </div>

      <div slot="footer">
        <Button @click="closeModal(false)">取消</Button>
      </div>
  </Modal>
</template>

<script>
  import { mapGetters } from 'vuex'
  import moment from 'moment'
  import vipApi from '@/api/vip'
  import wechatApi from '@/api/wechat'

  export default {
    name: 'update-modal',
    props: [
      'form'
    ],
    data () {
      return {
        loading: true,
        listLoading: false,
        selected: null,
        typeList: {},
        query: {
          pkRcId: null,
          currentPage: 1,
          limit: 10
        },
        page: {
          total: 0
        },
        columns: [
          {
            title: '序号',
            width: 50,
            render: (h, params) => {
              return (this.query.currentPage - 1) * this.query.limit + params.row._index + 1
            }
          },
          {
            title: '姓名',
            key: 'realName'
          },
          {
            title: '昵称',
            key: 'nickName'
          },
          {
            title: '性别',
            width: 50,
            render: (h, params) => {
              let { row } = params
              return row.sex === '1' ? '男' : '女'
            }
          },
          {
            title: '会员类型',
            key: 'memberTypeName'
          },
          {
            title: '入会时间',
            key: 'addRcTime',
            render: (h, params) => {
              let { row } = params
              if (row.addRcTime) {
                return moment(row.addRcTime).format('YYYY-MM-DD')
              } else {
                return '-'
              }
            }
          },
          {
            title: '微信绑定',
            key: 'bdStatus',
            render: (h, params) => {
              let { row } = params
              if (row.bdStatus === '0') {
                return '已绑定'
              } else {
                return '未绑定'
              }
            }
          },
          {
            title: '操作',
            render: (h, params) => {
              let { row } = params
              if (row.bdStatus !== '0') {
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    on: {
                      click: () => {
                        this.bind(params.row)
                      }
                    }
                  }, '选择绑定')
                ])
              }
            }
          }
        ],
        list: []
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    watch: {
      'query.currentPage': 'getList'
    },
    methods: {
      onChangePage (currentPage) {
        this.query.currentPage = currentPage
      },
      async getTypeList () {
        const { body } = await vipApi.typeList({
          pkRcId: this.userInfo.pkRclubInfo
        })
        const { responseData } = body
        this.typeList = responseData
      },
      async getList () {
        this.listLoading = true
        this.query.pkRcId = this.userInfo.pkRclubInfo
        const { body } = await vipApi.memberList(this.query)
        const { responseData } = body
        this.listLoading = false
        this.list = responseData.content
        this.page.total = responseData.totalElements
      },
      search () {
        this.query.currentPage = 1
        this.getList()
      },
      bind (item) {
        this.$Modal.confirm({
          title: '绑定确认',
          content: `<p>确认将 微信账户(${this.form.data.openName}) 与 会员(${item.nickName}) 进行绑定吗？</p>`,
          onOk: async () => {
            const { body } = await wechatApi.bindWechat({
              openId: this.form.data.openId,
              pkUid: item.pkUid
            })
            if (this.$apiHelper.requestSuccessed(body.responseCode)) {
              this.$Message.info('绑定成功')
              this.form.visible = false
              this.$emit('submit')
            } else {
              setTimeout(() => {
                this.$Modal.error({
                  title: '错误',
                  content: body.desc,
                  onOk: () => {}
                })
              }, 500)
            }
          }
        })
      },
      closeModal () {
        this.form.visible = false
      },
      submitForm () {}
    },
    mounted () {
      this.$store.dispatch('getUserInfo')
      this.getTypeList()
      this.getList()
    }
  }
</script>

<style>

</style>
